<template>
  <layout>
    <!-- 星期表头 -->
    <van-row
      class="cf-week-head"
      style="margin-top: 0.5rem;"
    >
      <van-col
        :span="3"
        class="cf-cell"
        style="border-right: 1px solid gainsboro;"
      />
      <van-col
        v-for="week in courseTableData.weekList"
        :key="week.wid"
        :span="3"
      ><span style="position: relative;top: 0.4rem;color: grey;">{{ week.name }}</span></van-col>
    </van-row>
    <!-- 时段表头&课程信息 -->
    <van-row
      v-for="(order,idx) in courseTableData.orderList "
      :key="order.oid"
      class="cf-item"
    >
      <van-col
        :span="3"
        class="cf-cell"
        style="background-color: white;border-right: 1px solid gainsboro;color: grey;"
      >
        <span class="cf-text"> {{ `${order.name}\n${ order.startTime }-\n${ order.endTime }` }}</span>
      </van-col>
      <van-col
        v-for="(cs,idxx) in courseTableData.csList[idx] "
        :key="idxx"
        :span="3"
        class="cf-cell"
        :style="{backgroundColor:cs? getCellRandomColor(cs.id): 'white' }"
        style="color: white;"
        @click="showCsDetail(cs,order)"
      >
        <span
          class="cf-text"
          style="font-size: 0.4rem;"
        >{{ cs? cs.classroomName:'' }}</span>
        <span
          class="cf-text"
          style="position: relative;margin-top: 0.1rem;"
        > {{ cs? `${cs.courseName}`:'' }}</span>
      </van-col>
    </van-row>
    <!-- 课程详细信息弹窗 -->
    <van-popup
      v-model="popShow"
      position="bottom"
      style="height: 25%;"
      round
    >
      <van-card style="height: 100%;">
        <template #title>
          <h2>{{ popData.courseName }}</h2>
        </template>
        <template #desc>
          <p>上课地点：{{ popData.classroomName }}</p>
          <p>教学班级：{{ popData.teachClassName }}</p>
          <p>教师：{{ popData.teacherName }}</p>
          <p>
            时间：{{ `${popData.teachYear}学年-第${popData.teachTerm}学期 | ${popData.teachTimeName} ${popData.sTime}-${popData.eTime}` }}
          </p>
        </template>
      </van-card>
    </van-popup>
  </layout>
</template>

<script>
import Layout from '@/views/layout'
import { Row, Col, Popup, Card } from 'vant'

export default {
  name: 'CourseTable',
  components: {
    Layout,
    [Row.name]: Row,
    [Col.name]: Col,
    [Popup.name]: Popup,
    [Card.name]: Card
  },
  data () {
    return {
      courseTableData: [],
      popData: {},
      popShow: false
    }
  },
  computed: {

  },
  created () {
    setTimeout(() => {
      this.$store.dispatch('courseTable/getCourseTable').then((data) => {
        this.courseTableData = data
      })
    }, 0)
  },
  methods: {
    getCellRandomColor (idx) { // 获取颜色
      const colors = ['#EFB1C7', '#FCD97D', '#84C9EF', '#A1A3B4', '#B7B577', '#C7C9E0', '#A7D0D8', '#AFC8B2']
      return colors[idx % colors.length]
    },
    showCsDetail (cs, order) {
      if (cs === null) return
      this.popData = cs
      this.popData.sTime = order.startTime
      this.popData.eTime = order.endTime
      this.popShow = true
    }
  }
}
</script>

<style scoped>
.cf-week-head {
  height: 5%;
  background-color: white;
  border-bottom: 1px solid gainsboro;
}
.cf-item {
  height: 18%;
}
.cf-cell {
  height: 100%;
  text-align: center;
}
.cf-text {
  display: block;
  margin-top: 50%;
}
</style>
